import React from 'react';
import { Input, Form, message, Button } from 'antd';

import { usePuteditaccountMutation } from '../../store/request/accountrequest';
import { useDispatch, useSelector } from 'react-redux';

import { setLogoutState } from '../../store/slice/loginslice';
const PasswordEdit = () => {
  const loginstate = useSelector(state => state.loginpara);
  
  const dispatch = useDispatch();
  const [messageApi, contextHolder] = message.useMessage();
  const [edittrigger] = usePuteditaccountMutation();
  const [form] = Form.useForm();
  const messageerror = (reason) => {
    //message.success('This is a success message');
    messageApi.open({
      type: 'error',
      content: '编辑失败：'+reason,
    });

  };
  const messagesucess = () => {
    messageApi.open({
      type: 'success',
      content: '编辑成功',
    });
  };
  const onFinish = async(values) => {
    if(values.password===values.password2){
      delete values.password2;
      delete values.oldpassword;
      values.authoritykey=1;
      const r = await edittrigger(values);
      if (r.error.originalStatus === 200){
        messagesucess();
        setTimeout(() => {
          dispatch(setLogoutState());
      }, 1000); // 延迟1秒执行navigate跳转
        
        
      }
      else{
        messageerror("响应失败");
      }
    }
    else{
      messageerror("新密码重复不正确");
    }
    
    console.log('Success:', values);
  };
  const onFinishFailed = (errorInfo) => {
    messageerror(errorInfo);
  
  };
  


  form.setFieldsValue({
    loginname: loginstate?.role?.loginname,
    oldpassword: ""

    //...record,  //一展开record，就会报错date.locale is not a function，但是之前arriveddate已经赋值为空字符串，所以除了arriveddate为空外，其余属性按照record展开
  });




  return (
    <>
      {contextHolder}
      <Form
        name="basic"
        form={form}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >

        <Form.Item
          label="用户名"
          name="loginname"

          rules={[
            {
              required: true,
              message: '请输入用户名',
            },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="旧密码"
          name="oldpassword"
          autoComplete="off" // 禁用自动填充
          rules={[
            {
              required: true,
              message: '请输入旧密码!',
            },
          ]}
        >
          <Input.Password />
        </Form.Item>
        <Form.Item
          label="输入新密码"
          name="password"
          rules={[
            {
              required: true,
              message: '请输入新密码!',
            },
          ]}
        >
          <Input.Password />
        </Form.Item>
        <Form.Item
          label="再次输入新密码"
          name="password2"
          rules={[
            {
              required: true,
              message: '请再次输入新密码!',
            },
          ]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit">
            提交修改
          </Button>
        </Form.Item>
      </Form>

    </>
  )


}


export default PasswordEdit





